jQuery Mobile: Develop and Design (Dylan Evers' Library) by Kris Hadlock

Author:Kris Hadlock
Language: eng
Format: epub
Publisher: Peachpit Press
Published: 2012-06-14T16:00:00+00:00

* * *

Figure 10.7 shows an example of the number element type without the enhancements.

Figure 10.7. A number element without enhancements from the jQuery Mobile framework.

With the enhancements, the number element looks much nicer and is easier for users to interact with in a mobile environment (Figure 10.8).

Figure 10.8. A number element with enhancements from the jQuery Mobile framework.

The textinput also includes a theme option, which you can access when selecting a text input element. The value of the theme can be set based on any prebuilt or custom swatch that includes a–z:

Click here to view code image

$('.my-textinput').textinput({theme: 'a'});

This example accesses a text input element with a class name of .my-textinput and sets the theme to a. You’ll learn more about themes in the next chapter.

As of version 1.1.0, jQuery Mobile also includes two new options: mini and preventFocusZoom. These can also be set on an individual form element by using the data- attribute named mini. Setting a form element to mini creates a more compact version of it. To set a form element to mini with code, simply select the text input(s), then use the textinput method to set the value of mini:

Click here to view code image

$('.my-textinput').textinput({mini: true});

The result of this code on a text input looks similar to the right input in Figure 10.9, which shows a comparison of the regular and mini text inputs.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.